<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="css/mui.min.css" rel="stylesheet" />
	<style>
		.mui-popover.mui-popover-action .mui-table-view {
			margin: 8px;
		}

		#filter>.mui-table-view-radio {
			text-align: left;
		}
	</style>
</head>

<body>

	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-pull-left"></a>
		<h1 class="mui-title">交易记录</h1>
		<a href="#filter" class="mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-right"><span class="mui-icon mui-icon-info"></span>筛选</a>
	</header>
	<div class="mui-content">
		<ul class="mui-table-view" id="recordList">
		</ul>
	</div>

	<div id="filter" class="mui-popover mui-popover-bottom mui-popover-action">
		<ul class="mui-table-view mui-table-view-radio">
			<li class="mui-table-view-cell mui-selected">
				<a href="#filter" class="mui-navigate-right">
					全部
				</a>
			</li>
		</ul>
		<ul class="mui-table-view">
			<li class="mui-table-view-cell">
				<a href="#filter"><b>取消</b></a>
			</li>
		</ul>
	</div>

	<script src="js/mui.min.js"></script>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript">
		mui.init({
			swipeBack: true //启用右滑关闭功能
		});
		mui.ready(function () {
			var data = {
				payerId: sessionStorage.getItem("payerId"),
				appId: sessionStorage.getItem("appId")
			};
			$.ajax({
				url: "/thmlfApi/avs/pay/getpayreocrd" + "?_d=" + Date.parse(new Date()),
				type: "POST",
				data: data,
				success: function (r) {
					if (r.code == 200) {
						var statusArr = [];
						$.each(r.result, function (index, data) {
							var status = '';
							var color = '';
							switch (data.status) {
								case 1:
									//等付款
									status = '未付款';
									color = '#FF0000';
									break;
								case 2:
									//取消
									color = '#CCFF33';
									status = '取消';
									break;
								case 3:
									// 退款
									color = '#9999FF';
									status = '退款';
									break;
								case 4:
									// 处理中
									color = '#00CC00';
									status = '处理中';
									break;
								case 6:
									// 提现失败
									status = '提现失败';
									color = '#FF6600';
									break;
								case 7:
									status = '支付成功';
									color = '#00CC00';
									break;
								case 8:
									status = '缴费成功';
									color = '#7c34cc';
									break;
							}
							var item = '<li class="mui-table-view-cell mui-media">' +
								'<div class="mui-slider-right mui-disabled">\n' +
                                '<a class="mui-btn mui-btn-red" data-order-id="' + data.orderId + '">删除</a>' +
                                '</div>' +
                                '<div class="mui-slider-handle">' +
                                '<a href="javascript:;" class="content" orderId="' + data.orderId + '">' +
                                '<div class="mui-media-body">' +
                                '<img class="mui-media-object mui-pull-left" src="img/d0.png">' +
                                '<span style="float: left;">' + data.accessName + '</span><span style="float: right;">' + data.amountTotal +
                                '￥</span><br />' +
                                '<p class="mui-ellipsis"><span style="float: left;">' + data.createDate +
                                '</span><span style="float: right;color: ' + color + '">' + status + '</span></p>' +
                                '</div>' +
                                '</a>' +
                                '</div>' +
                                '</li>';
							$('#recordList').append(item);

							if (statusArr.includes(status)) {
							} else {
								statusArr.push(status);
							}
						});
						$('.mui-btn-red').click(function (e) {
                            $.ajax({
                                url:'/thmlfApi/avs/pay/deleteorder?orderId='+$(this).attr('data-order-id')+"&payerId="+sessionStorage.getItem('payerId'),
								dataType:'JSON',
								success:function (r) {
									if (r.code == 200){
									    mui.toast('删除成功');
									    window.location.reload();
									}else {
									    mui.alert(r.message);
									}
                                },
								error:function (e) {
                                    console.error("request error",e);
									mui.alert("服务器繁忙");
                                }
                            })
                        });
						const newArr = Array.from(statusArr);
						// const newArr = ['未付款', '取消', '退款', '处理中', '提现失败', '支付成功', '缴费成功'];
						var filterList = $('#filter > .mui-table-view-radio'),
							addHtml = '';
						newArr.forEach(function (item) {
							addHtml += '<li class="mui-table-view-cell"><a href="#filter" class="mui-navigate-right">' + item +
								'</a></li>';
						});
						filterList.append(addHtml);

                        var filter = '';
						filterList.on('selected', function (e) {
							filter = e.detail.el.innerText;
                            var recordList = $('#recordList').children();
                            $.each(recordList,function () {
                                var text = $(this).find('p > span').eq(1).text();
                                if ($.trim(filter) === '全部'){
                                    $(this).show();
								}else if ($.trim(text) !== $.trim(filter)) {
                                    $(this).hide();
                                }else {
                                    $(this).show();
								}
                            });
						});

						$('.content').click(function () {
							var orderId = $(this).attr('orderId');
							if (orderId == null || orderId == undefined) {
								mui.alert("信息错误");
								return;
							}
							window.location.href = 'orderInfo.html?orderId=' + orderId;
						});
					} else {
						mui.alert(r.message);
					}
				},
				error: function (e) {
					console.log("request error:", e);
					mui.alert("获取数据失败");
				}
			})
		});
	</script>
</body>

</html>